import { useEffect } from 'react';

const key = '608d75903d29ad471362f8c58c550daf';
const iframeSrc = `https://m.amap.com/picker/?key=${key}`; // 文档说 center 不传时采用 H5 定位用户位置，但是没起作用！！！

export default function AMapLocpicker() {
  useEffect(() => {
    const handleLocal = function (
      this: Window,
      event: MessageEvent<any>,
    ): void {
      // console.log('location', event);

      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (event.origin == 'https://m.amap.com' && loc && loc.location) {
        //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        console.log('location', loc);
      }
    };
    var iframe = document.getElementById('amapIframe').contentWindow;
    document.getElementById('amapIframe').onload = function () {
      iframe.postMessage('hello', 'https://m.amap.com/picker/');
    };
    window.addEventListener('message', handleLocal, false);
    return () => {
      window.removeEventListener('message', handleLocal);
    };
  }, []);

  return (
    <>
      <div className="page">
        <iframe
          id="amapIframe"
          width="100%"
          height="100%"
          frameBorder={0}
          src={iframeSrc}
        ></iframe>
      </div>
    </>
  );
}
